<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
		<!-- 布局和动画 -->
		<link rel="stylesheet" type="text/css" href="css/test.css"/>
		<title></title>
	</head>
	<body>
		<div id="web">
			<div class="section">
				<div class="slide">
					第一
				</div>
				<div class="slide">
					第二
				</div>
			</div>
			<div class="section page2 active">
				<h1>page2</h1>
				<p>p标签延迟</p>
			</div>
			<div class="section">
				<h1>page3</h1>
			</div>
		</div>
		
		<!-- 引入js，注意依赖关系 -->
		<script src="js/jquery-1.8.3.min.js"></script>
		<script src="js/jquery.fullPage.min.js"></script>
		<!-- fullpage初始化 -->
		<script>
			//jq写法，$（“”）获取页面元素,引号里面写css3选择器
			
			$("#web").fullpage({
				//对象写法
				//属性：值(数字、字符串、对象、数组、布尔值、null/undefined、函数)
				sectionsColor:["#ff0000","#00ff00","#0000ff"],
				//导航小点
				navigation:true,
				//触摸的敏感度，越大越难滑
				tochSensitivity:100,
				//当滑到每一页结束之后触发的函数
				//可以在触发时给每个页面添加激活类（active）
				//参数：锚点序号，页面的序号
				
				afterLoad:function(anchorIndex,index){
				console .log("滑动结束");
				console.log(anchorIndex,index);
				//如果index时等于1时，就执行。。
//				if(index==1){
//					//先找到。section的元素，里面找
//					$(".section").eq(0).addClass("active haha");
//				}
//				if(index==2){
//					$(".section").eq(1).addClass("active");
//				}
			}
			})
		</script>
		
	</body>
</html>
